{% extends 'base.html' %}
{% load static %}

{% block main %}
<div class="container mt-4">
    <div class="row">
        <!-- 主内容区域 -->
        <div class="col-md-8">
            {% for post in post_list %}
                <article class="post">
                    <header>
                        <h2 class="entry-title">
                            <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
                        </h2>
                        <div class="entry-meta">
                            <span class="post-category"><a href="#">{{ post.category.name }}</a></span>
                            <span class="post-date"><a href="#"><time datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span>
                            <span class="post-author"><a href="#">{{ post.author }}</a></span>
                            <span class="comments-link"><a href="{{ post.get_absolute_url }}#comment-area">{{ post.comment_set.count }} 评论</a></span>
                            <span class="views-count"><a href="#">{{ post.views }} 阅读</a></span>
                        </div>
                    </header>
                    <div class="entry-content">
                        <p>{{ post.excerpt }}...</p>
                    </div>
                    <div class="read-more">
                        <a href="{{ post.get_absolute_url }}">继续阅读 →</a>
                    </div>
                </article>
            {% empty %}
                <div class="no-post">暂时还没有发布的文章！</div>
            {% endfor %}
        </div>

        <!-- 侧边栏区域 -->
        <div class="col-md-4">
            <div class="sidebar">
                <!-- 搜索框 -->
{#                <div class="sidebar-card">#}
{#                    <h4 class="sidebar-title">搜索</h4>#}
{#                    <form class="search-form" action="{% url 'blog:search' %}">#}
{#                        <input type="search" name="q" placeholder="输入搜索内容">#}
{#                        <button type="submit">搜索</button>#}
{#                    </form>#}
{#                </div>#}

                <!-- 分类 -->
                <div class="sidebar-card">
                    <h4 class="sidebar-title">分类</h4>
                    <ul class="category-list">
                        {% for category in category_list %}
                        <li>
                            <a href="{% url 'blog:category' category.pk %}">
                                {{ category.name }}
                                <span>({{ category.num_posts }})</span>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                <!-- 标签云 -->
                <div class="sidebar-card">
                    <h4 class="sidebar-title">标签云</h4>
                    <div class="tag-cloud">
                        {% for tag in tag_list %}
                        <a href="{% url 'blog:tag' tag.pk %}" class="tag">{{ tag.name }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
<style>
    body {
        background-color: #f0f5f9;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .post {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 30px;
        margin-bottom: 30px;
        transition: transform 0.3s, box-shadow 0.3s;
        border-left: 4px solid #3498db;
    }
    .post:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .entry-title a {
        color: #2c3e50;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.8rem;
        margin-bottom: 10px;
        display: inline-block;
    }
    .entry-title a:hover {
        color: #3498db;
    }
    .entry-meta {
        color: #7f8c8d;
        margin: 15px 0 25px;
        font-size: 0.9rem;
    }
    .entry-meta span {
        margin-right: 15px;
    }
    .entry-meta a {
        color: #7f8c8d;
    }
    .entry-meta a:hover {
        color: #3498db;
        text-decoration: none;
    }
    .entry-content {
        color: #34495e;
        line-height: 1.7;
        margin-bottom: 20px;
    }
    .read-more {
        display: inline-block;
        margin-top: 20px;
        color: #3498db;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: border-color 0.3s;
    }
    .read-more:hover {
        border-bottom-color: #3498db;
    }
    .sidebar {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 20px;
    }
    .sidebar-card {
        margin-bottom: 30px;
    }
    .sidebar-title {
        color: #2c3e50;
        font-size: 1.2rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .search-form input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .search-form button {
        margin-top: 10px;
        padding: 8px 15px;
        background: #3498db;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .category-list li {
        margin-bottom: 8px;
    }
    .category-list a {
        color: #34495e;
    }
    .category-list a:hover {
        color: #3498db;
    }
    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tag {
        display: inline-block;
        padding: 4px 10px;
        background: #e0f2fe;
        color: #3498db;
        border-radius: 15px;
        font-size: 0.8rem;
    }
    .tag:hover {
        background: #3498db;
        color: white;
    }
</style>
{% endblock %}
